<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改个人资料</title>
    
    <script src="/assets/home/js/jquery-1.9.1.min.js"></script>

    <!-- 下拉框插件 -->
    <link rel="stylesheet" href="/assets/home/plugin/select2/select2.min.css" />
    <script src="/assets/home/plugin/select2/select2.min.js"></script>

    <!-- 城市插件 -->
    <script src="/assets/home/plugin/citypicker/js/city-picker.data.min.js"></script>
    <script src="/assets/home/plugin/citypicker/js/city-picker.min.js"></script>

    <script src="/assets/home/js/mui.min.js"></script>
    <script src="/assets/home/js/wow.min.js"></script>

    <link rel="stylesheet" href="/assets/home/css/mui.min.css" />
    <link rel="stylesheet" href="/assets/home/css/animate.min.css" />
    <link rel="stylesheet" href="/assets/home/plugin/citypicker/css/city-picker.css" />
    <link rel="stylesheet" href="/assets/home/css/reset.css" />
    <link rel="stylesheet" href="/assets/home/css/profile.css" />
</head>

<body>
    <div class="user">
        <div class="avatar wow fadeInUp">
            <img src="{$business.avatar_text}" />
        </div>
    </div>

    <form class="mui-input-group" method="post" enctype="multipart/form-data">
        <div class="mui-input-row wow" data-wow-delay="100ms">
            <label>昵称：</label>
            <input type="text" class="mui-input-clear" placeholder="请输入昵称" name="nickname" value="{$business.nickname}">
        </div>
        <div class="mui-input-row wow" data-wow-delay="200ms">
            <label>手机号码：</label>
            <input type="text" class="mui-input-clear" placeholder="请输入手机号码" name="mobile" value="{$business.mobile}">
        </div>
        <div class="mui-input-row wow" data-wow-delay="300ms">
            <label>邮箱：</label>
            <input type="text" class="mui-input-clear" placeholder="请输入邮箱" name="email" value="{$business.email}">
        </div>
        <div class="mui-input-row wow" data-wow-delay="400ms">
            <label>密码：</label>
            <input type="password" class="mui-input-password" placeholder="请输入密码" name="password">
        </div>
        <div class="mui-input-row wow" style="position: relative;">
            <label>性别：</label>
            <div style="margin-top:5px;">
                <select name="gender" id="gender">
                    <option value="0">保密</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </div>
        </div>
        <div class="mui-input-row region wow" data-wow-delay="600ms">
            <label>地区：</label>
            <div class="citypicker">
                <input id="city" type="text" data-toggle="city-picker" name="region" readonly />
                <input type="hidden" name="code">
            </div>
        </div>
        <input type="file" class="form-control" id="avatar" name="avatar" style="display: none;" />
        
        <div class="mui-button-row wow" data-wow-delay="650ms">
            <button type="submit" class="mui-btn mui-btn-primary">确认</button>
        </div>
    </form>
</body>
</html>

<script>
    $('#city').citypicker({
        'province':'{$business.province_text}'.endsWith('市')?'{$business.province_text}'.substring(0,'{$business.province_text}'.length-1):'{$business.province_text}',
        'city':'{$business.city_text}',
        'district':'{$business.district_text}',
    });
    $("#city").on("cp:updated",function(){
        var citypicker = $("#city").data("citypicker")
        var code = citypicker.getCode("district")||citypicker.getCode("city")||citypicker.getCode("province")
        // console.log(code)
        $("input[name='code']").val(code)
    })

    //下拉框初始化赋值
    $("#gender").val("{$business.gender}")
    $('#gender').select2();
    

    //选择头像
    $('.avatar').click(function(){
        $('#avatar').click()
    })

    //给Input元素绑定一个改变的事件
    $('#avatar').change(function(){
        //将拿到的图片，转换为本地的图片结构，进行显示
        // console.log($(this)[0].files[0])

        //选择的图片
        var file = $(this)[0].files[0]

        //创建一个文件读取器对象
        var reader = new FileReader()

        //让这个对象去读取上面的文件
        reader.readAsDataURL(file)

        //绑定一个事件，读取成功后拿到结果的事件
        reader.onload = function(ev)
        {
            //把base64的数据 渲染上去
            $(".avatar img").attr('src', ev.target.result)
        }
    })

    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: '#box' // 可选滚动容器选择器，否则使用窗口
    }).init();
    // $('.mui-input-group .mui-btn-primary').click(function(){

    //     var formData = new FormData($('.mui-input-group')[0])
    //     for(var [k,v] of formData.entries()){
    //         console.log(k,v)
    //     }
    //     $.ajax({
    //         url:'/home/center/profile',
    //         type:'post',
    //         data:formData,
    //         contentType: false,
    //         processData: false,
    //     })
    //     .then((data)=>{
    //         console.log(data)
    //     })
    // })
</script>